State Sprite Images for Download

There have 5 styles of state sprite images to be chosen from - gray outline, gray, blue, green, and orange. Each sprite image includes icons of U.S. mainland and 52 states and equivalents. Each icon has transparent background and size of 64 x 64. Hope these images could be useful on your web design. Please feel free to Contact us if any question, or suggestion.

Usage Example

Move mouse on the state icon to switch the icon. This example uses blue sprite image as default image, and orange sprite image as hover image.
Mainland (US)

CSS Example

.US { background: url("/images/states_sprites_image_blue_64x64.png") 0 0 no-repeat; }
.US:hover { background: url("/images/states_sprites_image_orange_64x64.png") 0 0 no-repeat; }
.AK { background: url("/images/states_sprites_image_blue_64x64.png") -128px 0 no-repeat; }
.AK:hover { background: url("/images/states_sprites_image_orange_64x64.png") -128px 0 no-repeat; }
.AL { background: url("/images/states_sprites_image_blue_64x64.png") -192px 0 no-repeat; }
.AL:hover { background: url("/images/states_sprites_image_orange_64x64.png") -192px 0 no-repeat; }
.AR { background: url("/images/states_sprites_image_blue_64x64.png") -256px 0 no-repeat; }
.AR:hover { background: url("/images/states_sprites_image_orange_64x64.png") -256px 0 no-repeat; }
.AZ { background: url("/images/states_sprites_image_blue_64x64.png") -320px 0 no-repeat; }
.AZ:hover { background: url("/images/states_sprites_image_orange_64x64.png") -320px 0 no-repeat; }
.CA { background: url("/images/states_sprites_image_blue_64x64.png") -384px 0 no-repeat; }
.CA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -384px 0 no-repeat; }
.CO { background: url("/images/states_sprites_image_blue_64x64.png") -448px 0 no-repeat; }
.CO:hover { background: url("/images/states_sprites_image_orange_64x64.png") -448px 0 no-repeat; }
.CT { background: url("/images/states_sprites_image_blue_64x64.png") -512px 0 no-repeat; }
.CT:hover { background: url("/images/states_sprites_image_orange_64x64.png") -512px 0 no-repeat; }
.DC { background: url("/images/states_sprites_image_blue_64x64.png") 0 -64px no-repeat; }
.DC:hover { background: url("/images/states_sprites_image_orange_64x64.png") 0 -64px no-repeat; }
.DE { background: url("/images/states_sprites_image_blue_64x64.png") -64px -64px no-repeat; }
.DE:hover { background: url("/images/states_sprites_image_orange_64x64.png") -64px -64px no-repeat; }
.FL { background: url("/images/states_sprites_image_blue_64x64.png") -128px -64px no-repeat; }
.FL:hover { background: url("/images/states_sprites_image_orange_64x64.png") -128px -64px no-repeat; }
.GA { background: url("/images/states_sprites_image_blue_64x64.png") -192px -64px no-repeat; }
.GA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -192px -64px no-repeat; }
.HI { background: url("/images/states_sprites_image_blue_64x64.png") -256px -64px no-repeat; }
.HI:hover { background: url("/images/states_sprites_image_orange_64x64.png") -256px -64px no-repeat; }
.IA { background: url("/images/states_sprites_image_blue_64x64.png") -320px -64px no-repeat; }
.IA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -320px -64px no-repeat; }
.ID { background: url("/images/states_sprites_image_blue_64x64.png") -384px -64px no-repeat; }
.ID:hover { background: url("/images/states_sprites_image_orange_64x64.png") -384px -64px no-repeat; }
.IL { background: url("/images/states_sprites_image_blue_64x64.png") -448px -64px no-repeat; }
.IL:hover { background: url("/images/states_sprites_image_orange_64x64.png") -448px -64px no-repeat; }
.IN { background: url("/images/states_sprites_image_blue_64x64.png") -512px -64px no-repeat; }
.IN:hover { background: url("/images/states_sprites_image_orange_64x64.png") -512px -64px no-repeat; }
.KS { background: url("/images/states_sprites_image_blue_64x64.png") 0 -128px no-repeat; }
.KS:hover { background: url("/images/states_sprites_image_orange_64x64.png") 0 -128px no-repeat; }
.KY { background: url("/images/states_sprites_image_blue_64x64.png") -64px -128px no-repeat; }
.KY:hover { background: url("/images/states_sprites_image_orange_64x64.png") -64px -128px no-repeat; }
.LA { background: url("/images/states_sprites_image_blue_64x64.png") -128px -128px no-repeat; }
.LA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -128px -128px no-repeat; }
.MA { background: url("/images/states_sprites_image_blue_64x64.png") -192px -128px no-repeat; }
.MA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -192px -128px no-repeat; }
.MD { background: url("/images/states_sprites_image_blue_64x64.png") -256px -128px no-repeat; }
.MD:hover { background: url("/images/states_sprites_image_orange_64x64.png") -256px -128px no-repeat; }
.ME { background: url("/images/states_sprites_image_blue_64x64.png") -320px -128px no-repeat; }
.ME:hover { background: url("/images/states_sprites_image_orange_64x64.png") -320px -128px no-repeat; }
.MI { background: url("/images/states_sprites_image_blue_64x64.png") -384px -128px no-repeat; }
.MI:hover { background: url("/images/states_sprites_image_orange_64x64.png") -384px -128px no-repeat; }
.MN { background: url("/images/states_sprites_image_blue_64x64.png") -448px -128px no-repeat; }
.MN:hover { background: url("/images/states_sprites_image_orange_64x64.png") -448px -128px no-repeat; }
.MO { background: url("/images/states_sprites_image_blue_64x64.png") -512px -128px no-repeat; }
.MO:hover { background: url("/images/states_sprites_image_orange_64x64.png") -512px -128px no-repeat; }
.MS { background: url("/images/states_sprites_image_blue_64x64.png") 0 -192px no-repeat; }
.MS:hover { background: url("/images/states_sprites_image_orange_64x64.png") 0 -192px no-repeat; }
.MT { background: url("/images/states_sprites_image_blue_64x64.png") -64px -192px no-repeat; }
.MT:hover { background: url("/images/states_sprites_image_orange_64x64.png") -64px -192px no-repeat; }
.NC { background: url("/images/states_sprites_image_blue_64x64.png") -128px -192px no-repeat; }
.NC:hover { background: url("/images/states_sprites_image_orange_64x64.png") -128px -192px no-repeat; }
.ND { background: url("/images/states_sprites_image_blue_64x64.png") -192px -192px no-repeat; }
.ND:hover { background: url("/images/states_sprites_image_orange_64x64.png") -192px -192px no-repeat; }
.NE { background: url("/images/states_sprites_image_blue_64x64.png") -256px -192px no-repeat; }
.NE:hover { background: url("/images/states_sprites_image_orange_64x64.png") -256px -192px no-repeat; }
.NH { background: url("/images/states_sprites_image_blue_64x64.png") -320px -192px no-repeat; }
.NH:hover { background: url("/images/states_sprites_image_orange_64x64.png") -320px -192px no-repeat; }
.NJ { background: url("/images/states_sprites_image_blue_64x64.png") -384px -192px no-repeat; }
.NJ:hover { background: url("/images/states_sprites_image_orange_64x64.png") -384px -192px no-repeat; }
.NM { background: url("/images/states_sprites_image_blue_64x64.png") -448px -192px no-repeat; }
.NM:hover { background: url("/images/states_sprites_image_orange_64x64.png") -448px -192px no-repeat; }
.NV { background: url("/images/states_sprites_image_blue_64x64.png") -512px -192px no-repeat; }
.NV:hover { background: url("/images/states_sprites_image_orange_64x64.png") -512px -192px no-repeat; }
.NY { background: url("/images/states_sprites_image_blue_64x64.png") 0 -256px no-repeat; }
.NY:hover { background: url("/images/states_sprites_image_orange_64x64.png") 0 -256px no-repeat; }
.OH { background: url("/images/states_sprites_image_blue_64x64.png") -64px -256px no-repeat; }
.OH:hover { background: url("/images/states_sprites_image_orange_64x64.png") -64px -256px no-repeat; }
.OK { background: url("/images/states_sprites_image_blue_64x64.png") -128px -256px no-repeat; }
.OK:hover { background: url("/images/states_sprites_image_orange_64x64.png") -128px -256px no-repeat; }
.OR { background: url("/images/states_sprites_image_blue_64x64.png") -192px -256px no-repeat; }
.OR:hover { background: url("/images/states_sprites_image_orange_64x64.png") -192px -256px no-repeat; }
.PA { background: url("/images/states_sprites_image_blue_64x64.png") -256px -256px no-repeat; }
.PA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -256px -256px no-repeat; }
.PR { background: url("/images/states_sprites_image_blue_64x64.png") -320px -256px no-repeat; }
.PR:hover { background: url("/images/states_sprites_image_orange_64x64.png") -320px -256px no-repeat; }
.RI { background: url("/images/states_sprites_image_blue_64x64.png") -384px -256px no-repeat; }
.RI:hover { background: url("/images/states_sprites_image_orange_64x64.png") -384px -256px no-repeat; }
.SC { background: url("/images/states_sprites_image_blue_64x64.png") -448px -256px no-repeat; }
.SC:hover { background: url("/images/states_sprites_image_orange_64x64.png") -448px -256px no-repeat; }
.SD { background: url("/images/states_sprites_image_blue_64x64.png") -512px -256px no-repeat; }
.SD:hover { background: url("/images/states_sprites_image_orange_64x64.png") -512px -256px no-repeat; }
.TN { background: url("/images/states_sprites_image_blue_64x64.png") 0 -320px no-repeat; }
.TN:hover { background: url("/images/states_sprites_image_orange_64x64.png") 0 -320px no-repeat; }
.TX { background: url("/images/states_sprites_image_blue_64x64.png") -64px -320px no-repeat; }
.TX:hover { background: url("/images/states_sprites_image_orange_64x64.png") -64px -320px no-repeat; }
.UT { background: url("/images/states_sprites_image_blue_64x64.png") -128px -320px no-repeat; }
.UT:hover { background: url("/images/states_sprites_image_orange_64x64.png") -128px -320px no-repeat; }
.VA { background: url("/images/states_sprites_image_blue_64x64.png") -192px -320px no-repeat; }
.VA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -192px -320px no-repeat; }
.VT { background: url("/images/states_sprites_image_blue_64x64.png") -256px -320px no-repeat; }
.VT:hover { background: url("/images/states_sprites_image_orange_64x64.png") -256px -320px no-repeat; }
.WA { background: url("/images/states_sprites_image_blue_64x64.png") -320px -320px no-repeat; }
.WA:hover { background: url("/images/states_sprites_image_orange_64x64.png") -320px -320px no-repeat; }
.WI { background: url("/images/states_sprites_image_blue_64x64.png") -384px -320px no-repeat; }
.WI:hover { background: url("/images/states_sprites_image_orange_64x64.png") -384px -320px no-repeat; }
.WV { background: url("/images/states_sprites_image_blue_64x64.png") -448px -320px no-repeat; }
.WV:hover { background: url("/images/states_sprites_image_orange_64x64.png") -448px -320px no-repeat; }
.WY { background: url("/images/states_sprites_image_blue_64x64.png") -512px -320px no-repeat; }
.WY:hover { background: url("/images/states_sprites_image_orange_64x64.png") -512px -320px no-repeat; }

State Sprite Images

To download the sprite image, right click on the image, and select "Save image as...".

64x64 state sprite image with transparent background and blue color

state sprite image with U.S. maindland and 52 states and equivalents (64x64, blue).

64x64 state sprite image with transparent background and green color

state sprite image with U.S. maindland and 52 states and equivalents (64x64, green).

64x64 state sprite image with transparent background and orange color

state sprite image with U.S. maindland and 52 states and equivalents (64x64, orange).

64x64 state sprite image with transparent background and gray color

state sprite image with U.S. maindland and 52 states and equivalents (64x64, gray).

64x64 state sprite image with transparent background and gray outline

state sprite image with U.S. maindland and 52 states and equivalents (64x64, gray outline).